Web Development Customizing Legends এবং Tooltips গাইড ও নোট

Chart.js একটি অত্যন্ত কাস্টমাইজেবল লাইব্রেরি যা ব্যবহারকারীদের তাদের চার্টের Legends (লেজেন্ড) এবং Tooltips (টুলটিপস) কাস্টমাইজ করার সুযোগ প্রদান করে। এই বৈশিষ্ট্যগুলোকে কাস্টমাইজ করে আপনি আপনার চার্টের প্রদর্শন এবং ব্যবহারকারীর অভিজ্ঞতা আরও উন্নত করতে পারেন।

Legends কাস্টমাইজ করা

Legends চার্টের একটি গুরুত্বপূর্ণ অংশ যা ডেটা সিরিজের নাম এবং তাদের রঙের কোড দেখায়। Chart.js আপনাকে লেজেন্ডের অবস্থান, রঙ, ফন্ট, আকার এবং অন্যান্য সেটিংস কাস্টমাইজ করার সুযোগ দেয়।

Legends কাস্টমাইজেশন এর উপাদান:

1. display: লেজেন্ড দেখানো হবে কিনা তা নিয়ন্ত্রণ করে।
2. position: লেজেন্ড কোথায় অবস্থান করবে (যেমন top, left, bottom, right)।
3. labels: লেজেন্ডের লেবেল কাস্টমাইজ করতে ব্যবহৃত হয় (যেমন ফন্ট, আকার, রঙ)।
4. onClick: লেজেন্ডের উপরে ক্লিক করার ইভেন্ট হ্যান্ডলার।

Legends কাস্টমাইজ করার উদাহরণ:

const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green'],
        datasets: [{
            label: 'Votes',
            data: [12, 19, 3, 5],
            backgroundColor: ['rgba(255, 99, 132, 0.2)', 'rgba(54, 162, 235, 0.2)', 'rgba(255, 206, 86, 0.2)', 'rgba(75, 192, 192, 0.2)'],
            borderColor: ['rgba(255, 99, 132, 1)', 'rgba(54, 162, 235, 1)', 'rgba(255, 206, 86, 1)', 'rgba(75, 192, 192, 1)'],
            borderWidth: 1
        }]
    },
    options: {
        responsive: true,
        plugins: {
            legend: {
                display: true, // লেজেন্ড দেখানো হবে
                position: 'top', // লেজেন্ডের অবস্থান
                labels: {
                    color: 'rgb(0, 0, 0)', // লেজেন্ডের রঙ
                    font: {
                        size: 14, // ফন্ট সাইজ
                        family: 'Arial', // ফন্ট ফ্যামিলি
                        weight: 'bold' // ফন্ট ওয়েট
                    }
                },
                onClick: function(e) {
                    alert('Legend clicked!');
                }
            }
        }
    }
});

Legends কাস্টমাইজেশনের মূল পয়েন্ট:

• position: আপনি লেজেন্ডের অবস্থান top, left, bottom, অথবা right নির্ধারণ করতে পারেন।
• labels: লেজেন্ডের টেক্সটের ফন্ট, সাইজ, রঙ এবং অন্যান্য সেটিংস কাস্টমাইজ করা যায়।
• onClick: লেজেন্ডের উপরে ক্লিক করলে ইভেন্ট চালানোর জন্য onClick ইভেন্ট হ্যান্ডলার ব্যবহার করতে পারেন।

Tooltips কাস্টমাইজ করা

Tooltips চার্টে ডেটা পয়েন্টের উপর হোভার করার সময় প্রদর্শিত হয়। এটি ব্যবহারকারীদের চার্টের ডেটা সম্পর্কে আরও বিস্তারিত তথ্য দেখানোর সুযোগ দেয়। Chart.js আপনাকে টুলটিপের কন্টেন্ট, অবস্থান, ফন্ট, রঙ এবং অন্যান্য সেটিংস কাস্টমাইজ করার সুযোগ দেয়।

Tooltips কাস্টমাইজেশন এর উপাদান:

1. enabled: টুলটিপ দেখানো হবে কিনা তা নিয়ন্ত্রণ করে।
2. mode: টুলটিপের মোড নির্ধারণ করে (যেমন nearest, index, dataset ইত্যাদি)।
3. callbacks: টুলটিপ কাস্টম কন্টেন্ট প্রদর্শন করতে ব্যবহৃত হয়।
4. backgroundColor: টুলটিপের ব্যাকগ্রাউন্ড রঙ।
5. titleFontSize: টুলটিপের শিরোনামের ফন্ট সাইজ।
6. bodyFontSize: টুলটিপের বডি টেক্সটের ফন্ট সাইজ।

Tooltips কাস্টমাইজ করার উদাহরণ:

const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: ['January', 'February', 'March', 'April', 'May'],
        datasets: [{
            label: 'Sales',
            data: [10, 20, 30, 40, 50],
            borderColor: 'rgba(75, 192, 192, 1)',
            fill: false
        }]
    },
    options: {
        responsive: true,
        plugins: {
            tooltip: {
                enabled: true, // টুলটিপ সক্রিয় করা
                mode: 'index', // টুলটিপ মোড নির্ধারণ
                backgroundColor: 'rgba(0, 0, 0, 0.7)', // টুলটিপের ব্যাকগ্রাউন্ড রঙ
                titleFontSize: 16, // টুলটিপের শিরোনামের ফন্ট সাইজ
                bodyFontSize: 14, // টুলটিপের বডির ফন্ট সাইজ
                callbacks: {
                    // কাস্টম টুলটিপ কন্টেন্ট
                    label: function(tooltipItem) {
                        return 'Sales: ' + tooltipItem.raw + ' units';
                    }
                }
            }
        }
    }
});

Tooltips কাস্টমাইজেশনের মূল পয়েন্ট:

• enabled: টুলটিপের প্রদর্শন সক্ষম বা নিষ্ক্রিয় করা।
• mode: টুলটিপের প্রদর্শনের ধরন, যেমন nearest, index, অথবা dataset।
• backgroundColor: টুলটিপের ব্যাকগ্রাউন্ড রঙ কাস্টমাইজ করা।
• callbacks: আপনি যদি কাস্টম টুলটিপ কন্টেন্ট চাইতে চান, তবে label ফাংশনের মাধ্যমে সেটি করতে পারেন।

Summary

Chart.js এর Legends এবং Tooltips কাস্টমাইজেশন ডেটার উপস্থাপন এবং ব্যবহারকারীর অভিজ্ঞতাকে আরও উন্নত করতে সহায়ক। লেজেন্ডের মাধ্যমে আপনি চার্টের ডেটাসেট সম্পর্কিত তথ্য প্রদান করতে পারেন এবং টুলটিপের মাধ্যমে ডেটার আরও বিস্তারিত তথ্য দেখাতে পারেন। উভয়ই অত্যন্ত কাস্টমাইজেবল এবং আপনার চার্টের জন্য কার্যকরী কন্টেন্ট সরবরাহ করতে সাহায্য করে।